<template>
    <div style="width: 600px">
        <div class="filter">
            <div class="uploadBtn">
                <el-button
                    @click="modelDownload()"
                    type="default"
                    style=""
                    :icon="Download"
                >大屏数据模版下载</el-button>
            </div>
            <div class="uploadBtn">
                <el-select
                    v-model="year"
                    placeholder="请选择年度"
                    style="width: 100px"
                    size="default"
                >
                    <el-option
                        v-for="item in yearList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
        </div>
        <el-upload
            drag
            action="#"
            :http-request="dailyExcelImport"
            :on-change="handleChange"
            :file-list="fileList"
            v-model="uploadList"
            accept=".xlsx,.xls"
            :on-success="
                (res) => {
                    return handleExcelImportSuccess(res);
                }
            "
        >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
                拖拽到这里 或者 <em>点击这里</em> 上传
            </div>
            <template #tip>
                <div
                    class="el-upload__tip"
                    style="line-height: 2"
                >
                    文件格式：.xlsx、.xls
                </div>
            </template>
        </el-upload>
    </div>
</template>

<script setup>
import uploadHttp from "@/https/upload.js";
import { Download, UploadFilled } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import moment from "moment";
import { ref } from "vue";

const fileList = ref([]);
const uploadList = ref([]);
const handleChange = (file, fileList) => {
    console.log(file, fileList);
    uploadList.value = fileList;
    if (fileList.length > 1) {
        fileList.splice(0, 1);
    }
};

const year = ref(moment().format("YYYY"));
const yearList = ref([
    { label: moment().format("YYYY"), value: moment().format("YYYY") },
    {
        label: moment().add(-1, "year").format("YYYY"),
        value: moment().add(-1, "year").format("YYYY"),
    },
]);
const dailyExcelImport = (params) => {
    console.log(params);
    let dataObj = {
        file: params.file,
        year: year.value
    };
    uploadHttp.importAll(dataObj).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
            ElMessage({
                message: "上传成功",
                type: "success",
            });
        } else {
            fileList.value = [];
            ElMessage({
                message: "上传失败,请重新上传",
                type: "error",
            });
        }
    });
};

const modelDownload = () => {
    uploadHttp.dowmloadVisualScreen().then((response) => {
        console.log(response);
        const content = response.data;
        const blob = new Blob([content], { type: "application/ms-excel" });
        let fileName = "大屏数据模版.xls";
        if ("download" in document.createElement("a")) {
            // 非IE下载
            const elink = document.createElement("a");
            elink.download = fileName;
            elink.style.display = "none";
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
        } else {
            // IE10+下载
            navigator.msSaveBlob(blob, fileName);
        }
    });
};
</script>

<style scoped lang="less">
.waterYield {
    background: #fff;
    height: 100%;
}

.filter {
    display: flex;
    flex-direction: row;
}

.uploadBtn {
    text-align: left;
    margin-bottom: 40rem;
    margin-right: 20rem;
}
</style>
